<template>
  <div class="risk">
    <div class="add" @click="edit">编辑</div>
    <div class="col_text_center">
      {{ form.OperationName }}
    </div>
    <eagle-collapse v-model="activeNames">
      <eagle-collapse-item title="一、适用范围" name="1">
        <eagle-row class="rowBack">
          <eagle-col class="col_text_left">
            <span class="spanTitle1">{{ form.Scope }}</span>
          </eagle-col>
        </eagle-row>
      </eagle-collapse-item>
    </eagle-collapse>
    <eagle-collapse v-model="activeNames">
      <eagle-collapse-item title="二、个体防护要求" name="2">
        <eagle-row :gutter="20" type="flex">
          <eagle-col
            span="8"
            v-for="(item, index) in form.Details2"
            :key="index"
          >
            <eagle-col span="24" class="colstyle">
              <eagle-row>
                <eagle-input :value="item.Attachs" readonly>
                  <template #input>
                    <eagle-image-preview
                      :images="item.Attachs"
                    ></eagle-image-preview>
                  </template>
                </eagle-input>
              </eagle-row>
              <div class="spanText">
                <span class="spanTitle1">{{ item.Name }}</span>
              </div>
              <div class="spanText">
                <span class="spanTitle1">{{ item.Remarks }}</span>
              </div>
            </eagle-col>
          </eagle-col>
        </eagle-row>
      </eagle-collapse-item>
      <eagle-collapse-item title="三、安全作业规程" name="3">
        <eagle-row class="rowBack">
          <eagle-row>
            <div
              span="10"
              class="col_text_left"
              v-for="(item, index) in form.Details5"
              :key="index"
            >
              <span class="spanTitle"> 【{{ item.Activity }}】</span>
              <!-- </van-col> -->
              <eagle-col
                span="24"
                class="ml-5"
                v-for="(item2, index) in form.Details3"
                v-if="item2.Activity == item.Activity"
                :key="index"
              >
                <span class="spanTitle2"
                  ><span class="point">●</span> {{ item2.OperatePoint }}
                  <eagle-button
                    class="btnP"
                    size="small"
                    type="info"
                    @click="getListDetail(item2.SEQ)"
                    >详情
                  </eagle-button>
                </span>
              </eagle-col>
            </div>
          </eagle-row>
        </eagle-row>
      </eagle-collapse-item>
    </eagle-collapse>
    <!-- 弹出层 -->
    <eagle-dialog v-model="show" title="详细信息" isCustomButton>
      <div v-for="(item, index) in form.Details6" :key="index">
        <eagle-cell-group :border="border">
          <eagle-row class="rowTitle">
            <eagle-col span="9"
              ><span class="spanTitle3">步骤/单元</span>
            </eagle-col>
            <eagle-col span="15"
              ><span class="spanValue">{{ item.Activity }}</span>
            </eagle-col>
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col span="9"
              ><span class="spanTitle3">危险有害因素</span>
            </eagle-col>
            <eagle-col span="15"
              ><span class="spanValue">{{
                item.DangerousSource
              }}</span></eagle-col
            >
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col span="9"
              ><span class="spanTitle3">潜在事故后果</span>
            </eagle-col>
            <eagle-col span="15"
              ><span class="spanValue">{{
                item.LatentConsequencesName
              }}</span></eagle-col
            >
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col span="9"
              ><span class="spanTitle3">管理措施类型</span>
            </eagle-col>
            <eagle-col span="15"
              ><span class="spanValue">{{
                item.MeasureTypeName
              }}</span></eagle-col
            >
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col span="9"
              ><span class="spanTitle3">管理措施内容</span>
            </eagle-col>
            <eagle-col span="15"
              ><span class="spanValue">{{ item.OperatePoint }}</span></eagle-col
            >
          </eagle-row>
          <eagle-row class="rowTitle">
            <eagle-col span="9">
              <span class="spanTitle3">图示</span>
            </eagle-col>
            <eagle-col span="15" v-if="item.Attachs">
              <eagle-input
                :value="item.Attachs"
                readonly
                style="margin-left: -15px"
              >
                <template #input>
                  <eagle-image-preview
                    :images="item.Attachs"
                  ></eagle-image-preview>
                </template>
              </eagle-input>
            </eagle-col>
          </eagle-row>
        </eagle-cell-group>
      </div>
      <template #buttons>
        <span class="complete-btn" @click="confirm">关闭</span>
      </template>
    </eagle-dialog>
  </div>
</template>

<script>
import { Row } from "vant";
export default {
  data() {
    return {
      id: this.$route.query.id,
      autoSize: true,
      border: false,
      form: {},
      show: false,
      activeNames: ["1"],
      ReceiverUserName: "",
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    //编辑
    edit() {
      this.$router.push({
        path: "/RiskPoint/RiskOpRegulationEdit",
        query: { id: this.id },
      });
    },
    getDetail() {
      let _this = this;
      let params = { id: _this.id };
      _this.$axios
      .get("/RiskOpRegulation/GetDetail",{params:params})
      .then((res) => {
        var data = res.data;
        data.Details5 = [];
        data.Details6 = [];
        data.Details3.forEach((element) => {
          const index1 = data.Details5.findIndex(
            (x) => x.Activity === element.Activity
          );
          if (index1 < 0) {
            data.Details5.push(element);
          }
        });
        _this.form = data;
      });
    },
    getListDetail(seq) {
      this.form.Details3.forEach((element) => {
        if (seq === element.SEQ) {
          this.form.Details6.push(element);
        }
      });
      this.form.Details3.forEach((element) => {
        switch (element.MeasureType) {
          case "1":
            element.MeasureTypeName = "工程技术";
            break;
          case "2":
            element.MeasureTypeName = "应急处置";
            break;
          case "3":
            element.MeasureTypeName = "操作行为";
            break;
          case "4":
            element.MeasureTypeName = "个体防护";
            break;
          case "5":
            element.MeasureTypeName = "功能、参数有效性";
            break;
          case "6":
            element.MeasureTypeName = "检验检测维护";
            break;
        }
      });
      this.show = true;
    },
    confirm() {
      this.show = false;
      this.form.Details6.length = 0;
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  background-color: #e8f1f8;
}
.tit {
  background-color: #fff;
}
.col_text_left {
  text-align: left;
}
.col_text_center {
  text-align: center;
  margin: 15px;
  font-size: 15px;
}
.colstyle {
  margin-bottom: 5px;
}
.spanText {
  margin: 4px;
}
.btnP {
  height: 20px;
  position: relative;
  bottom: 4px;
  margin-left: 10px;
}
.rowTitle {
  padding: 10px;
  line-height: 20px;
}
.rowBack {
  background-color: #f8f9f9;
  padding: 8px;
}
.spanValue {
  font-size: 14px;
  color: #969799;
}
.spanTitle {
  font-size: 0.47rem;
  color: #323233;
  width: 80px;
  line-height: 30px;
  margin-right: 20px;
}
.spanTitle2 {
  font-size: 14px;
  color: #646566;
  width: 80px;
  line-height: 30px;
}
.point {
  font-size: 10px;
  color: #1989fa;
}
</style>
